<template>
	<view>
		<view class="bottom_box">
			<!-- 返回+功能按钮 -->
			<view class="u-width-100 twice_box" v-if="isTwice">
				<view class="return common_css" @click="back">{{ leftText || '返回'}}</view>
				<view class="confirm common_css" @click="confirm" v-if="isClick">{{ rightText || '保存' }}</view>
				<view class="confirm common_css" v-else>{{ rightText || '保存' }}</view>
			</view>
			<!-- 返回按钮 -->
			<view class="u-width-100" v-else-if="isReturn">
				<view class="common_css" :class="isReturnOramage ? 'confirm_btn' : 'return_btn'" @click="back">返回</view>
			</view>
			<!-- 分享+功能按钮 -->
			<view class="u-width-100 twice_box" v-else-if="isShare">
				<view class="u-m-l-50 u-flex-col u-row-center u-col-center" @click="shareShow = true">
					<u-icon name="share-fill" color="#000" size="40"></u-icon>
					<view>分享</view>
				</view>
				<view class="sign_btn common_css u-m-r-10" @click="confirm" v-if="!isDisable">{{ btnText || '确定' }}</view>
				<view class="disable_btn common_css u-m-r-10" v-else>{{ btnText || '确定' }}</view>
			</view>
			<!-- 分享按钮 -->
			<view class="u-width-100 twice_box" v-else-if="isOnlyShare">
				<view class="sign_btn common_css u-m-r-10" style="width: 100%;" @click="openOnlyShare">{{ btnText || '确定' }}</view>
			</view>
			<!-- 返回+分享+功能按钮 -->
			<view class="u-width-100 u-flex" v-else-if="isThird">
				<view class="u-flex-1 u-radius-50 return_btn common_css" @click="back">{{ leftText || '返回'}}</view>
				<view class="u-flex-1 u-m-l-20 u-m-r-20 u-radius-50 confirm_btn common_css" @click="center">{{ centerText }}</view>
				<view class="u-flex-1 u-radius-50 right_btn common_css" @click="right">{{ rightText }}</view>
			</view>
			<!-- 功能按钮 -->
			<view class="u-width-100" v-else>
				<view class="confirm_btn common_css" @click="confirm" >{{btnText || '确定'}}</view>
			</view>
		</view>
		
		<Share :isShowShare="shareShow" :isMoment="isMoment" @closeShare="closeShare" @handleOpenMoment="openMoment"></Share>
	</view>
</template>

<script>
	import Share from '@/components/Share.vue'
	export default{
		props:{
			//  两个按钮
			isTwice:{
				type: Boolean,
				default: false
			},
			//  只有返回按钮
			isReturn:{
				type: Boolean,
				default: false
			},
			//  含分享按钮
			isShare:{
				type: Boolean,
				default: false
			},
			//  只有分享按钮
			isOnlyShare: {
				type: Boolean,
				default: false
			},
			//  左侧按钮文案
			leftText:{
				type: String
			},
			//  中间按钮文案
			centerText: {
				type: String
			},
			//  右侧按钮文案
			rightText:{
				type: String
			},
			//  单按钮文案
			btnText:{
				type: String
			},
			//  是否可点击
			isDisable:{
				type: Boolean,
				default: true
			},
			//  防止重复点击
			isClick:{
				type: Boolean,
				default: true
			},
			// 返回路径
			backUrl: {
				type: String
			},
			// 分享海报
			isMoment: {
				type: Boolean,
				default: false
			},
			// 返回按钮颜色
			isReturnOramage: {
				type: Boolean,
				default: false
			},
			// 三按钮
			isThird:{
				type: Boolean,
				default: false
			}
		},
		components:{
			Share
		},
		data(){
			return{
				shareShow: false
			}
		},
		methods:{
			back(){
				if(this.backUrl){
					if(['home','group','demand','mine','news'].includes(this.backUrl)){
						uni.switchTab({
							url: `/pages/${this.backUrl}/${this.backUrl}`
						})
					}else{
						uni.redirectTo({
							url: this.backUrl
						})
					}
				}else{
					let pages = getCurrentPages()
					let prePage = pages[pages.length - 2]
					if (prePage) {
						uni.navigateBack({
							delta: 1
						})
					} else {
						uni.switchTab({
							url: "/pages/home/home"
						})
					}
				}
			},
			center(){
				this.$emit("center")
			},
			right(){
				this.$emit("right")
			},
			confirm(){
				this.$emit("confirm")
			},
			closeShare() {
				this.shareShow = false
			},
			openMoment(){
				this.$emit('openMoment')
			},
			openOnlyShare(){
				if(this.btnText == '分享海报'){
					this.shareShow = true
				}else{
					uni.switchTab({
						url: "/pages/home/home"
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.common_css{
		color:#fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
	}
	
	.twice_box{
		width: 100%;
		// height: 80rpx;
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		
		.return{
			width: 46%;
			background: #999;
			height: 100%;
			border-radius: 50rpx;
		}
		
		.confirm{
			width: 46%;
			background: #B3723E;
			height: 100%;
			border-radius: 50rpx;
		}
	}
	
	.return_btn{
		height: 80rpx;
		background: #000;
		border-radius: 50rpx;
	}
	
	.confirm_btn{
		height: 80rpx;
		background: #B3723E;
		border-radius: 50rpx;
	}
	
	.right_btn{
		height: 80rpx;
		background: #F84D3F;
		border-radius: 50rpx;
	}
	
	.sign_btn {
		width: 520rpx;
		background: #B3723E;
		border-radius: 50rpx;
	}
	
	.disable_btn{
		width: 520rpx;
		background: #000;
		border-radius: 50rpx;
	}
</style>